


<!--******************** Main ******************* -->
<div data-role="page" id="main">
    <div data-role='header' data-position='inline' data-theme='a'>
	    <h1>SeatMe</h1>
	</div><!--header-->
	
			<div id="buttons" data-role="content">
					<a href="#myclassrooms" data-transition="slide" >
						<div data-role="button" id="myclassesbutton" >My Classrooms</div>
					</a>
					<a href="#search" data-transition="slide">
						<div data-role="button" id="findclassroombutton" >Find a Classroom</div>
					</a>

			</div>  
			

</div>


<!--******************** My Classrooms ******************* -->
<div id="myclassrooms" data-role="page">
	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>My Classrooms</h1>
	    <a href="#main" data-direction="reverse" data-icon="back" data-theme="c" data-iconpos="notext" data-transition="slide">Back</a>
	</div>
	
	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->
	
			<ul id="classlist" data-inset="false" data-split-icon="plus" data-role="listview" href="#viewclassroom" >
				<li>
					<a href="#viewclough152" data-transition-"slide" data-direction="forward">
						<h3>Clough 152</h3>
						<p>EAS 1600</p>
						<p>0 Updates</p>
					</a>
				</li>
						 
				<li><a href="#viewhowiel1">
					<h3>Howie L1</h3>
					<p>MATH 1501</p>
					<p>1 Update</p></a>
				</li>
				
				<li><a href="#viewklaus1443">
					<h3>Klaus 1443</h3>
					<p>MATH 1501</p>
					<p>5 Updates</p></a>
				</li>				
			</ul>
		
		</form><!-- post -->
	</form><!-- get -->

</div><!--page-->


<!--******************** Search Classrooms ******************* -->
<div id="search" data-role="page" >	
	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>Find a Classroom</h1>
	    <a href="#main" data-direction="reverse" data-icon="back" data-theme="c" data-iconpos="notext" data-transition="slide">Back</a>
	</div>
		
	<div data-role="content" id="content">			
		<ul id="buildinglist" data-role="listview" data-inset="false" data-filter="true" data-theme="c" data-divider-theme="b" >
			<script id="buildinglist_row_template" type="text/x-jquery-tmpl">
				<li class="buildinglist_row" id="buildinglist_row_${id}" data-icon="arrow-r" data-iconpos="right" data-theme="c">
					<a href='#viewbuilding&building_id=${id}' data-transition="slide">
						<h3>${name}</h3>
						<p>#$ Rooms</p>
					</a>
				</li>
			</script>			
			</ul>
		</div> <!-- end -->
</div><!-- /content -->


<!--******************** View Building Rooms ******************* -->
<div id="viewbuilding" data-role="page" >	
	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>Classrooms</h1>
	    <a href="#search" data-direction="reverse" data-icon="back" data-theme="c" data-iconpos="notext" data-transition="slide">Back</a>
	</div><!-- end header -->

	<div data-role="content" id="content">	
		<ul id="classroomlist" data-role="listview" data-filter="true" class="ui-listview">
			<script id="classroomlist_row_template" type="text/x-jquery-tmpl">
				<li class="classroomlist_row" id="classroomlist_row_${classroom_id}" data-icon="arrow-r" data-iconpos="right" data-theme="c">
					<a href='#viewclassroom&building_id=0&classroom_id=${classroom_id}' data-transition="slide">
						<h3>${classroom_id}</h3>
						<p>#$ Rooms</p>
					</a>
				</li>
			</script>			
		</ul>		
	</div> <!-- end -->
</div><!-- /content -->

<!--******************** Search Clough Rooms ******************* -->
<div id="viewclough" data-role="page" >	
	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>Clough Classrooms</h1>
	    <a href="#search" data-direction="reverse" data-icon="back" data-theme="c" data-iconpos="notext" data-transition="slide">Back</a>
	</div>

	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->
		
		<div class="content-primary">	
			
			<ul id="cloughrooms" data-role="listview" data-filter="true" class="ui-listview">
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#viewclough152" class="ui-link-inherit">
							<h3>152</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
					</div>
				</li>
				
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#classnotavailable" class="ui-link-inherit">
							<h3>153</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
					</div>
				</li>
				
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#classnotavailable" class="ui-link-inherit">
							<h3>154</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
					</div>
				</li>
				
			</ul>
		</div> <!-- end -->
		

		</form><!-- post -->
	</form><!-- get -->
</div><!-- /content -->


<!--******************** Search Howie Rooms ******************* -->
<div id="viewhowie" data-role="page" >	
	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>Howie Classrooms</h1>
	    <a href="#search" data-direction="reverse" data-icon="back" data-theme="c" data-iconpos="notext" data-transition="slide">Back</a>
	</div>

	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->
		
		<div class="content-primary">	
			
			<ul data-role="listview" data-filter="true" class="ui-listview">
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#viewclough152" class="ui-link-inherit">
							<h3>L1</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
					</div>
				</li>
				
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#classnotavailable" class="ui-link-inherit">
							<h3>L2</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
					</div>
				</li>
				
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#classnotavailable" class="ui-link-inherit">
							<h3>L3</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
					</div>
				</li>
				
			</ul>
		</div> <!-- end -->
		

		</form><!-- post -->
	</form><!-- get -->
</div><!-- /content -->


<!--******************** Search Klaus Rooms ******************* -->
<div id="viewklaus" data-role="page" >	
	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>Klaus Classrooms</h1>
	    <a href="#search" data-direction="reverse" data-icon="back" data-theme="c" data-iconpos="notext" data-transition="slide">Back</a>
	</div>

	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->
		
		<div class="content-primary">	
			
			<ul data-role="listview" data-filter="true" class="ui-listview">
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#viewclough152" class="ui-link-inherit">
							<h3>1443</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
					</div>
				</li>
				
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#classnotavailable" class="ui-link-inherit">
							<h3>1453</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
					</div>
				</li>
				
				<li data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
					<div class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#classnotavailable" class="ui-link-inherit">
							<h3>2853</h3>
							<p>subdata 1</p>
							<p>subdata 2</p>
							</a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
					</div>
				</li>
				
			</ul>
		</div> <!-- end -->
		

		</form><!-- post -->
	</form><!-- get -->
</div><!-- /content -->


<!--******************** View Clough 152 ******************* -->
<div id="viewclough152" data-role="page" >	

	<div data-role="header" data-id="mainheader"  data-theme="a">
	    <h1>Clough 152</h1>
	    <a href="#myclassrooms" data-direction="reverse" data-theme="c" data-icon="back" data-iconpos="notext" data-transition="slide"></a>


	</div>

	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->
			
			
		</form><!-- post -->
	</form><!-- get -->
	
	<div data-role="footer" data-theme="a">
		<h3></h3>
		<a href="#" data-role="button" data-theme="c" class="ui-btn-left"  data-icon="plus" data-transition="slide" >Add Attribute</a> 
	</div>
</div><!-- /content -->


<!--******************** View Howie L1 ******************* -->
<div id="viewhowiel1" data-role="page" >	

	<div data-role="header" data-id="mainheader"  data-theme='a'>
	    <h1>Howie L1</h1>
	    <a href="#myclassrooms" data-direction="reverse" data-theme="c" data-icon="back" data-iconpos="notext" data-transition="slide"></a>
<!--	    <a href="#add" data-role="button" data-icon="plus" data-iconpos="notext" data-transition="slide" ></a> -->
<!--	    <a href="#add" data-role="button" data-icon="minus" data-transition="slide" >Remove Attribute</a> Do we need this feature? -->
	</div>

	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->

		
		</form><!-- post -->
	</form><!-- get -->
</div><!-- /content -->


<!--******************** View Klaus1443 ******************* -->
<div id="viewklaus1443" data-role="page" >	

	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>Klaus 1443</h1>
	    <a href="#myclassrooms" data-direction="reverse" data-theme="c" data-icon="back" data-iconpos="notext" data-transition="slide"></a>
<!--	    <a href="#add" data-role="button" data-icon="plus" data-iconpos="notext" data-transition="slide" ></a> -->
<!--	    <a href="#add" data-role="button" data-icon="minus" data-transition="slide" >Remove Attribute</a> Do we need this feature? -->
	</div>

	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->

		
		</form><!-- post -->
	</form><!-- get -->
</div><!-- /content -->


<!--******************** Add Attribute ******************* -->
<div id="add" data-role="page" >	
	<div data-role="header" data-id="mainheader" data-theme='a'>
	    <h1>Add Attribute</h1>
	    <a href="#myclassrooms" data-direction="reverse" data-icon="back" data-iconpos="notext" data-transition="slide"></a>
	</div>
	
	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->
		
			<div id="buttons" data-role="content"> <!--center align the buttons -->
					<a href="add"  >
						<div data-role="button" id="myclassesbutton" >Power Outlet</div>
					</a>
					<a href="remove">
						<div  data-role="button" id="searchbutton">A/C</div>
					</a>

			</div><!-- button -->
		
		</form><!-- post -->
	</form><!-- get -->
</div><!-- /content -->


<!--******************** Remove Attribute ******************* -->
<div id="remove" data-role="page" >	
	<form method="get" > <!--form before div data-role? -->
		<form method="post"> <!-- post or get method? -->
		
			<div id="buttons" data-role="content"> <!--center align the buttons -->
					<a href="add"  > 
						<div data-role="button" id="myclassesbutton" >Add Attribute</div>
					</a>
					<a href="remove">
						<div  data-role="button" id="searchbutton">Remove Attribute</div>
					</a>

			</div><!-- button -->
		
		</form><!-- post -->
	</form><!-- get -->
</div><!-- /content -->


<div data-role="footer" id="footer">
	<h2>Team PYC </h2>
</div>

<!--******************************************************************************************************************************-->
<div data-role="dialog" id="error_dialog" >
	<div data-role="header" data-position="inline" data-theme='d'>
        <h1 role="heading">Error</h1>
    </div>
	<div id="error_dialog_content" data-role="content">
		<script id="error_message_template" type="text/x-jquery-tmpl">
			<div id="error_message">
				<center>
					<p>	An unexpected error occurred<br />
						<span id="errorName">${errorName}</span><br />
						<span id="errorDescription">${errorDescription}</span>
					</p>
				</center>
			</div>
		</script>
	</div><!-- /content -->
</div><!-- /dialog -->



